<template>
    <el-dialog v-model="visible" :title="title" :width="width" @closed="closed" @open="init" :close-on-press-escape="false">
        <el-form :inline="true"
                 ref="formRef"
                 :model="role"
                 :rules="rules">
            <el-form-item label="编号" prop="id" style="display: none">
                <el-input v-model="role.id"/>
            </el-form-item>
            <el-form-item label="角色名称：" prop="roleNameCh" style="width: 240px">
                <el-input placeholder="请输入角色名称" v-model="role.roleNameCh"/>
            </el-form-item>
            <el-form-item label="权限字符：" prop="roleName" style="width: 240px">
                <el-input placeholder="请输入权限字符" v-model="role.roleName"/>
            </el-form-item>
            <el-form-item label="角色顺序：" prop="sort">
                <el-input-number v-model="role.sort" :min="1" controls-position="right"/>
            </el-form-item>
            <el-form-item label="状态：" prop="enabled">
                <el-radio-group v-model="role.enabled">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注：" label-width="80px" prop="remark">
                <el-input v-model="role.remark" :rows="3" type="textarea" placeholder="请输入备注" style="width: 515px;"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <template v-if="type===0">
                <el-button type="primary" @click="submitAdd">确认添加</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="submitUpdate">保存变更</el-button>
            </template>
        </template>
    </el-dialog>
</template>

<script>
    import {addRole, hasSomeNameCode, hasSomeNameRole, updateRole} from "../../../../network/sys/role";
    import {getCurrentInstance, toRefs} from "vue";
    import {ElLoading, ElMessage} from "element-plus";
    import {ref,reactive} from "vue";

    export default {
        name: "RoleForm",
        props:['width'],
        emits: ['refresh-data'],
        setup(props,{emit}){
            const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
            const visible =  ref(false);
            const formRef = ref(null);
            //验证角色名称
            const validateRoleNameCh = (rule,value,callback)=>{
                // console.log('rule',rule)
                hasSomeNameRole({
                    id: form.role.id,
                    roleNameCh: value
                }).then(vo=>{
                    // console.log('相同角色名称',vo)
                    if(vo){
                        callback(new Error('已存在相同名称角色'));
                    }
                    callback()
                })
            }
            //验证角色编码
            const validateRoleCode = (rule,value,callback)=>{
                hasSomeNameCode({id:form.role.id,roleName:value}).then(vo=>{
                    if(vo){
                        callback(new Error('已存在相同编号角色'))
                    }
                    callback();
                })
            }
            const form = reactive({
                role:{
                    id: null,
                    roleName: null,
                    roleNameCh: null,
                    sort: null,
                    enabled: 1,
                    remark: null
                },
                rules:{
                    roleName: [
                        { required: true, message: '请输入角色编号', trigger: 'blur' },
                        { validator: validateRoleCode,trigger: 'blur'},
                    ],
                    roleNameCh: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                        { validator: validateRoleNameCh,trigger: 'blur'},
                    ],
                    sort: [
                        { required: true, message: '请选择排序', trigger: 'blur' }
                    ],
                    enabled: [
                        { required: true, message: '前选择是否启用', trigger: 'blur' },
                    ]
                },
                setRole({id,roleName, roleNameCh, sort, enabled, remark}){
                    form.role.id = id;
                    form.role.roleName = roleName;
                    form.role.roleNameCh = roleNameCh;
                    form.role.sort = sort;
                    form.role.enabled = enabled;
                    form.role.remark = remark;
                },
                submitUpdate(){
                    formRef.value.validate((valid) => {
                        if (valid) {
                            let loading = ElLoading.service({
                                lock: true,
                                text: '修改用户信息...',
                            })
                            updateRole(form.role).then(vo=>{
                                loading.close();
                                globalProperties.$response.handle({
                                    data: vo,
                                    success: '修改成功',
                                    error: '修改失败',
                                    successFn: ()=>{
                                        emit('refresh-data');
                                        visible.value = false;
                                    },
                                    // failFn: ()=>{
                                    //
                                    // }
                                })
                            })
                        } else{
                            ElMessage.error('修改失败，请先完善表单!')
                        }
                    })
                },
                submitAdd(){
                    formRef.value.validate((valid)=>{
                        if(valid){
                            let loading = ElLoading.service({lock: true, text: '正在添加用户...'})
                            addRole(form.role).then(vo=>{
                                loading.close();
                                globalProperties.$response.handle({
                                    data: vo,
                                    success: '添加成功',
                                    error: '添加失败',
                                    successFn:()=>{
                                        emit('refresh-data');
                                        visible.value = false;
                                    },
                                    log: '添加结果'
                                })
                            })
                        }else{
                            ElMessage.error('添加失败，请先完善表单!')
                        }
                    })
                }
            })

            return {
                ...toRefs(form),
                formRef,
                visible
            }
        },
        data(){
            return{
                title: '',
                type: 0
            }
        },
        methods:{
            init(){

            },
            closed(){
                this.$refs.formRef.clearValidate();
                this.$refs.formRef.resetFields();
            },
        }
    }
</script>

<style scoped>
    *{
        /*border: 1px solid red;*/
    }
    .item{
        display: flex;
        margin-bottom: 20px;
    }
    .item-title{
        width: 100px;
        color: #a4a4a4;
        line-height: 30px;
        font-size: 16px
    }
    .el-tree{
        width: 100%;
        border: 1px solid lightgray;
    }
    .el-form--inline .el-form-item {
        min-width: 270px;
    }
</style>